<style>
    .slideall{height:auto;}
    .category-content .category{display:none;-webkit-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s}
    .hover .category{display:block;}
</style>
<div class="shopNav">
    <div class="slideall">
        <div class="nav-cont">
            <ul>
                <li class="index"><a href="#">首页</a></li>
                <li class="qc"><a href="#">闪购</a></li>
                <li class="qc"><a href="#">限时抢</a></li>
                <li class="qc"><a href="#">团购</a></li>
                <li class="qc last"><a href="#">大包装</a></li>
            </ul>
            <div class="nav-extra">
                <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
            </div>
        </div>
        <!--侧边导航 -->
        <div id="nav" class="navfull">
            <div class="area clearfix">
                <div class="category-content" id="guide_2">
                    <div class="long-title" style="margin-top:-45px;"><span class="all-goods">全部分类</span></div>
                    <div class="category">
                        <ul class="category-list" id="js_climit_li">
                            {volist name=":format_tree_cat(goods_cache_cat(0))" id="vo"}
                            <li class="appliance js_toggle relative">
                                <div class="category-info">
                                    <h3 class="category-name b-category-name">
                                        <i><img src="__SITE_PUBLIC__/image/cake.png"></i>
                                        <a class="ml-22" title="{$vo.cat_name}">{$vo.cat_name}</a>
                                    </h3>
                                    <em>&gt;</em></div>
                                <div class="menu-item menu-in top">
                                    <div class="area-in">
                                        <div class="area-bg">
                                            <div class="menu-srot">
                                                <div class="sort-side">
                                                    {volist name="vo.children" id="v"}
                                                    <dl class="dl-sort">
                                                        <dt><span title="{$v.cat_name}">{$v.cat_name}</span></dt>
                                                        {volist name="v.children" id="x"}
                                                        <dd><a title="{$x.cat_name}" href="{$x.url}"><span>{$x.cat_name}</span></a></dd>
                                                        {/volist}
                                                    </dl>
                                                    {/volist}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <b class="arrow"></b>
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--轮播 -->
        <script type="text/javascript">
            (function() {
                $('.am-slider').flexslider();
            });
            $(document).ready(function() {
                $("li").hover(function() {
                    $(".category-content .category-list li.first .menu-in").css("display", "none");
                    $(".category-content .category-list li.first").removeClass("hover");
                    $(this).addClass("hover");
                    $(this).children("div.menu-in").css("display", "block")
                }, function() {
                    $(this).removeClass("hover")
                    $(this).children("div.menu-in").css("display", "none")
                });
                $(function() {
                    $('#guide_2').hover(function() {
                        $(this).addClass("hover");
                    },
                    function() {
                        $(this).removeClass("hover");
                    })
                })
            })
        </script>
        <!--小导航 -->
        <div class="am-g am-g-fixed smallnav">
            <div class="am-u-sm-3">
                <a href="sort.html"><img src="__SITE_PUBLIC__/image/navsmall.jpg" />
                    <div class="title">商品分类</div>
                </a>
            </div>
            <div class="am-u-sm-3">
                <a href="#"><img src="__SITE_PUBLIC__/image/huismall.jpg" />
                    <div class="title">大聚惠</div>
                </a>
            </div>
            <div class="am-u-sm-3">
                <a href="#"><img src="__SITE_PUBLIC__/image/mansmall.jpg" />
                    <div class="title">个人中心</div>
                </a>
            </div>
            <div class="am-u-sm-3">
                <a href="#"><img src="__SITE_PUBLIC__/image/moneysmall.jpg" />
                    <div class="title">投资理财</div>
                </a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <script type="text/javascript">
        if ($(window).width() < 640) {
            function autoScroll(obj) {
                $(obj).find("ul").animate({
                    marginTop: "-39px"
                }, 500, function() {
                    $(this).css({
                        marginTop: "0px"
                    }).find("li:first").appendTo(this);
                })
            }
            $(function() {
                setInterval('autoScroll(".demo")', 3000);
            })
        }
    </script>
</div>